<template>
    <div>
        <div class="box2">
            <div class="box1">
                <div class="top">
                    <div class="box">
                        <Search />
                    </div>
                    <span>筛选搜索</span>
                </div>
                <div>
                    <el-row class="mb-4">
                        <el-button>重置</el-button>
                        <el-button type="primary" @click="falseBox">查询搜索</el-button>
                    </el-row>
                </div>
            </div>
            <div>
                活动名称：<el-input placeholder="活动名称" v-model="paginationParams.keyword" />
            </div>
        </div>
    </div>
    <div class="tian">
        <div class="top">
            <div class="box">
                <Tickets />
            </div>
            <span style="margin-left: 10px;">数据列表</span>
        </div>
        <div class="bottom">
            <el-row class="mb-4">
                <el-button @click="seckill">秒杀事件段列表</el-button>
                <el-button @click="Add">添加活动</el-button>
            </el-row>
        </div>
    </div>
    <!-- 表格 -->
    <div class="table-container">
        <el-table :data="False" border style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="编号" />
            <el-table-column prop="title" label="活动标题" />
            <el-table-column prop="startDate" label="开始时间">
                <template #default="scope">
                    {{ dayjs(scope.row.startDate).format("YYYY-MM-DD HH:mm:ss") }}
                </template>
            </el-table-column>
            <el-table-column prop="endDate" label="结束时间">
                <template #default="scope">
                    {{ dayjs(scope.row.endDate).format("YYYY-MM-DD HH:mm:ss") }}
                </template>
            </el-table-column>
            <el-table-column label="上线/下线">
                <template #default="{ row }">
                    <el-switch v-model="row.status" :active-value="1" :inactive-value="0" />
                </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
                <template #default="{ row }">
                    <el-button link type="primary" size="small" @click="SettingUpProducts(row.id)">设置商品</el-button>
                    <el-button link type="primary" size="small" @click="compile(row.id)">编辑</el-button>
                    <el-button link type="primary" size="small" @click="deleteId(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页器 组件 -->
    <div class="fen">
        <el-pagination v-model:current-page="paginationParams.currentPage" v-model:page-size="paginationParams.pageSize"
            :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="paginationParams.total"
            :background="true" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

    <!-- 添加活动 以及 编辑弹框 -->
    <AddActivities :id="activityId" :dialogFormVisible="dialogFormVisible" @cancel="Cprogram" @confirm="Notarize" />
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import * as http from "../../request/http";
import { ElMessage, ElMessageBox, dayjs } from 'element-plus';
import AddActivities from './AddActivities.vue'
import {useRouter} from 'vue-router'
let router = useRouter()
const False = ref<flashList[]>([])
// 分页器相关参数
const paginationParams = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 100,
    keyword: ''
})

const falseBox = () => {
    http.flash.flashList({
        pageNum: paginationParams.currentPage,
        pageSize: paginationParams.pageSize,
        keyword: paginationParams.keyword //查询搜索
    }).then(res => {
        // console.log(res);
        False.value = res.data.list //把后台数据给到False
        paginationParams.total = res.data.total //更新总页数
    })
}
falseBox() //重新请求

const handleSizeChange = (_val: number) => {
    // console.log("页容量发生变化触发", `${val} items per page`)
    //重新请求
    falseBox()
}
const handleCurrentChange = (_val: number) => {
    // console.log("页码发生变化", `current page: ${val}`)
    //重新请求
    falseBox()
}
// 控制窗口的  (新增  编辑)  打开/关闭  默认关闭
const dialogFormVisible = ref(false);

// 当前活动id
const activityId = ref(0);

const Add = () => { //点击添加按钮
    activityId.value = 0
    dialogFormVisible.value = true
}
const compile = (id: number) => { //点击编辑按钮
    activityId.value = id//点击 编辑时 修改当前活动id为传进来的参数id(当前编辑的活动id)
    dialogFormVisible.value = true;   // 打开 编辑窗口
}
//// 监听子组件的自定义事件 cancel  的回调函数
const Cprogram = () => {
    dialogFormVisible.value = false
}

//监听子组件的自定义事件 confirm  的回调函数
const Notarize = () => {
    dialogFormVisible.value = false
    falseBox() //重新请求
}
//删除
const deleteId = (id: number) => {
    const idn = [id]
    ElMessageBox.confirm(
        '是否要删除该活动?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => { //删除
        //发起请求，删除活动
        http.flash.flashDelete(idn).then(res => {//判断是否成功删除活动
            if (res.code === 200) {
                ElMessage.success("成功删除")
                falseBox()
            }
        })
    }).catch(() => {
        ElMessage.warning('取消删除')
    })

}

const seckill = ()=>{ //跳转秒杀时间页面
    router.push({path:'flashSession'})
}
   
const SettingUpProducts =(id:number)=>{ //跳转设置商品
    router.push({
        path:'selectSession',
        query:{flashPromotionId:id}   
    })
}
</script>

<style scoped>
.box {
    width: 15px;
    height: 15px;

}

.box1 {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.box2 {
    height: 60px;
    border: 1px solid gainsboro;
    border-radius: 10px;
    margin: 20px;
    padding: 20px;

}

.top {
    display: flex;
}

.el-input {
    width: 300px;
}

.tian {
    display: flex;
    justify-content: space-between;

    border: 1px solid gainsboro;
    height: 50px;
    line-height: 50px;
    margin: 20px;
    border-radius: 10px;
    padding: 10px;
}

.bottom {
    margin-top: 10px;
}

.fen {
    float: right;
    margin-top: 10px;
    margin-right: 20px;
}
</style>